<template>
  <div id="Service">
    <div class="spinner" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>      
    <p class="infoP" v-show="infoP">结账记录</p>     
    <mt-loadmore :top-method="loadTop" ref="loadmore">    
      <div class="hcontent" v-for="item in HContent" @click="bill('/Effective',item.ENDACCOUNT_ID + ',' + $route.params.id)">
        <p class="contentName">{{item.SHOPNAME | dateEmpty}}</p>
        <p class="contentState">{{item.TREATMENT_MARK | dateEmpty}}</p>
        <br />
        <div>
          <span class="L-icon">L</span>
          <span class="contentText">长短款额：{{item.DIFFERENT_PRICE | ComMoney2}} 元</span>
        </div>
        <br />
        <div>
          <span class="G-icon"></span>
          <span class="content-span">结账金额：{{item.CASHPAY | ComMoney2}} 元</span>
        </div>
        <div>
          <span class="R-icon"></span>
          <span class="content-span">结账时间：{{item.ENDACCOUNT_DATE | dateEmpty}}</span>
        </div>
      </div>      
      <div class="content" v-for="(item,i) in List" :key="i" @click="bill('/Effective',item.ENDACCOUNT_ID + ',' + $route.params.id)">
        <p class="contentName">{{item.SHOPNAME | dateEmpty}}</p>
        <p class="contentState">{{item.TREATMENT_MARK | dateEmpty}}</p>
        <br />
        <div>
          <span class="L-icon">L</span>
          <span class="contentText">长短款额：{{item.DIFFERENT_PRICE | ComMoney2}} 元</span>
        </div>
        <br />
        <div>
          <span class="G-icon"></span>
          <span class="content-span">结账金额：{{item.CASHPAY | ComMoney2}} 元</span>
        </div>
        <div>
          <span class="R-icon"></span>
          <span class="content-span">结账时间：{{item.ENDACCOUNT_DATE | dateEmpty}}</span>
        </div>
      </div>
    </mt-loadmore>   
    <div class="loadPull" v-show="loadPullS">
      <mt-spinner type="fading-circle" v-show="!loadPullD"></mt-spinner>
      <p v-show="loadPullD">{{loadPullText}}</p>
    </div>     
  </div>
</template>

<script>
import store from "@/store/store.js";
import { getDay } from "@/util/publicJS.js";
import { Loadmore, Spinner } from "mint-ui";
export default {
  name: "Service",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      HContent: [],
      Content: [],
      spinner: true,
      infoP: false,
      List: [],
      loadPullText: "",
      loadPullS: false,
      loadPullD: false,
      Loading: true
    };
  },
  methods: {
    bill: function(val, id) {
      // console.log(id);
      if (val === "/Effective") {
        this.$router.push({ path: "/Homepage/Effective" + "/" + id });
      }
    },
    // 获取结账记录
    getRecord: function() {
      let date = getDay(-1, "/");
      if (store.state.date != "" && store.state.date != "null") {
        date = store.state.date;
      }
      this.$http
        .get(
          this.Url +
            "action_type=GetEndaccountByOpenid&action_data=" +
            store.state.openid +
            "&action_record=" +
            date +
            "&Serverpart_ID=" +
            this.$route.params.id
        )
        .then(response => {
          // success callback
          // console.log(response);
          // this.Content = response.data.Endaccount;
          let i = 0;
          response.data.Endaccount.forEach(val => {
            if (
              val.TREATMENT_MARK == "主任确认" ||
              val.TREATMENT_MARK == "待审核"
            ) {
              this.HContent.push(val);
              i++;
            } else {
              this.Content.push(val);
              i++;
            }
          });
          let last = this.List.length - 1;
          for (let i = 1; i <= 10; i++) {
            if (last + i <= this.Content.length - 1) {
              this.List[last + i] = this.Content[last + i];
            } else {
              this.loadPullText = "加载完毕";
              this.loadPullD = true;
            }
          }
          this.spinner = false;
          this.infoP = true;
          this.loadPullS = true;
          this.Loading = true;
          // console.log(response);
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 下拉刷新
    loadTop: function() {
      this.HContent = [];
      this.Content = [];
      this.List = []; // 初始化10条
      this.spinner = true;
      this.infoP = false;
      this.loadPullS = false;
      this.loadPullD = false;
      this.getRecord();
      this.$refs.loadmore.onTopLoaded();
    },
    // 上拉加载
    handleScroll: function() {
      let scrollTop = window.scrollY; // 滚动条在Y轴上的滚动距离
      let scrollHeight = document.body.scrollHeight; // 内容可视区域的高度加上溢出（滚动）的距离。
      let windowHeight = window.innerHeight; // 内容可视区域的高度。
      // console.log(scrollTop);
      // console.log(scrollHeight);
      // console.log(windowHeight);
      if (
        scrollTop + windowHeight === scrollHeight &&
        this.Loading == true &&
        this.loadPullD == false
      ) {
        this.Loading = false;
        this.spinner = true;
        this.infoP = false;
        setTimeout(() => {
          let last = this.List.length - 1;
          for (let i = 1; i <= 10; i++) {
            if (last + i <= this.Content.length - 1) {
              this.List[last + i] = this.Content[last + i];
            } else {
              this.loadPullText = "加载完毕";
              this.loadPullD = true;
            }
          }
          this.spinner = false;
          this.infoP = true;
          this.Loading = true;
        }, 500);
      }
    }
  },
  created() {
    this.getRecord();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  }
};
</script>

<style scoped>
.infoP {
  color: #b7b8ba;
  padding: 3.5rem 0.5rem 0.5rem 0.5rem;
}
.content {
  width: 95%;
  padding: 0.75rem;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  font-size: 14px;
  margin-bottom: 0.5rem;
}
.hcontent {
  width: 95%;
  padding: 0.75rem;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  font-size: 14px;
  margin-bottom: 0.5rem;
  border: 1px solid #4a4c5b;
}
.contentName {
  width: 7.5rem;
  float: left;
}
.contentState {
  float: right;
  margin-bottom: 0.75rem;
}
.L-icon {
  display: block;
  float: left;
  background-color: #9c9c9c;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border-radius: 0.5rem;
  text-align: center;
  color: #fff;
  margin: 0.25rem 0.25rem 0 0;
}
.contentText {
  display: block;
  float: left;
  color: #636363;
}
.G-icon {
  display: block;
  float: left;
  background-color: #44bea3;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.R-icon {
  display: block;
  float: left;
  background-color: #fc9153;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.content-span {
  color: #636363;
}
.loadPull {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
</style>

